<template>
  <div style="min-height:500px;" ref="ruleForm">
    <a-button type="primary" style="margin:40px 0 20px 0;" @click="clickPush">新增</a-button>
    <a-table
      ref="table"
      rowKey="key"
      :columns="columns"
      :dataSource="pageData"
      :pagination="false"
    />
    <j-modal
      :title="title"
      :width="600"
      :visible="visible"
      switchFullscreen
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">
      <a-form-model layout="horizontal" ref="subForm" :model="model" :rules="validatorRules" v-bind="formItemLayout">
        <z-form-item :datas="fieldArrModal" :form="model" :rules="validatorRules" :gutter="0" />
      </a-form-model>
    </j-modal>
  </div>
</template>

<script>
export default {
  props: ['current', 'controlPersonType', 'value'],
  data() {
    return {
      title: '新增吸毒查获情况或其他前科',
      model: {},
      modelType: 'add',
      visible: false,
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      },
      dictOptions1: [
        { text:"吸毒", value:"1" },
        { text:"其他", value:"2" }
      ],
      dictOptions2: [
        { text:"案件类型一", value:"1" },
      ],
      drugCategoryOptions: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 80,
          align: 'center',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '查获时间',
          dataIndex: 'seizedDate',
          width: 80,
          align: 'center',
        },
        {
          title: '查获单位',
          dataIndex: 'seizedUnit',
          width: 80,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '查获地区',
          dataIndex: 'seizedArea',
          width: 60,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '案件类别',
          dataIndex: 'caseCategory',
          width: 110,
          align: 'left',
          customRender: text => {
            return this.$options.filters.filterArray(text, this.dictOptions1, 'value', 'text')
          }
        },
        {
          title: '案件类型',
          dataIndex: 'caseType',
          width: 80,
          align: 'center',
          customRender: text => {
            return this.$options.filters.filterArray(text, this.dictOptions2, 'value', 'text')
          }
        },
        {
          title: '滥用毒品种类',
          dataIndex: 'drugCategory',
          width: 80,
          align: 'center',
          customRender: text => {
            return this.$filterMultiDictText(this.drugCategoryOptions, text)
          }
        },
        {
          title: '查处结果',
          dataIndex: 'investigationResults',
          width: 110,
          align: 'left',
          customRender: text => {
            return <j-ellipsis value={text} length={20} />
          }
        },
        {
          title: '操作',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          customRender: (text, record, index) => {
            return (
              <a-space size={6}>
                <a-button type="link" style={'padding:0'} onClick={event => this.clickPush(record)}>编辑</a-button>
                <a-button type="link" style={'padding:0'} onClick={event => this.onDelete(record.key)}> 删除 </a-button>
              </a-space>
            )
          }
        }
      ],
      fieldArrModal: [
        { label: '查获时间', prop: 'seizedDate', tagType: 'date-picker', format: 'YYYY-MM-DD' },
        { label: '查获单位', prop: 'seizedUnit', tagType: 'input' },
        { label: '查获地区', prop: 'seizedArea', tagType: 'input' },
        { label: '案件类别', prop: 'caseCategory', tagType: 'dict-select', dictOptions: [] },
        { label: '案件类型', prop: 'caseType', tagType: 'dict-select', dictOptions: [] },
        { label: '滥用毒品种类', prop: 'drugCategory', tagType: 'dict-multi-tag', dictCode:'drug_type', type:'checkbox'},
        { label: '查处结果', prop: 'investigationResults', tagType: 'input' },
      ],
      validatorRules: {
        seizedDate:[ { required: true, message: '请选择' }],
        seizedUnit:[ { required: true, message: '请输入' }],
        seizedArea:[ { required: true, message: '请输入' },],
        caseCategory:[ { required: true, message: '请选择' },],
        caseType:[ { required: true, message: '请选择' },],
        drugCategory:[ { required: true, message: '请选择' },],
        investigationResults:[ { required: true, message: '请输入' },],
      },
      pageData: []
    }
  },
  computed: {
    getValue() {
      let value = this.value ? this.value : []
      return value
    }
  },
  watch: {
    getValue: {
      immediate: true,
      deep: true,
      handler(val) {
        // console.log(val)
        // this.pageData = val//[...this.pageData, ...val]
        this.pageData = val.map(v=> {
          return { ...v, key: v.id }
        })
      }
    },
    // pageData:{
    //   immediate: true,
    //   deep: true,
    //   handler(val) {
    //     this.$emit('change', this.current, val)
    //   }
    // }
  },
  mounted() {
    this.fieldArrModal.forEach(item => {
      let d = [{ text:"请选择", value:"" }]
      if(item.prop==='caseCategory') {
        item.dictOptions = [...d, ...this.dictOptions1]
      } 
      if(item.prop==='caseType') {
        item.dictOptions = [...d, ...this.dictOptions2]
      }
    })
    this.$initDictOptions('drug_type').then((res) => {
      if (res.success) {
        this.drugCategoryOptions = res.result
      }
    })
  },
  methods: {
    clickPush(record) {
      this.visible=true
      this.modelType = record && Object.keys(record).length>0 && record.key? 'edit':'add'
      this.model = this.modelType==='edit'? Object.assign({}, record):{}
      this.title = this.modelType==='edit'? '编辑吸毒查获情况或其他前科':'新增吸毒查获情况或其他前科'
    },
    handleOk() {
      let parameter = Object.assign({}, (this.modelType==='edit'? {}: {key: 'add_' + Date.parse(new Date()).toString()}), this.model)
      this.$refs.subForm.validate((valid)=> {
        if (valid) {
          if (this.modelType==='edit') {
            let index = this.pageData.findIndex(item=> item.key === parameter.key)
            this.pageData.splice(index, 1, parameter)
          } else {
            this.pageData.push(parameter)
          }
          this.handleCancel()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onDelete(key) {
      let that = this
      this.$confirm({
        title: `确定删除该条记录?`,
        onOk() {
          const dataSource = [...that.pageData];
          that.pageData = dataSource.filter((item) => item.key !== key)
        },
        onCancel() {
          console.log('Cancel')
        }
      })
    },
    handleCancel() {
      this.visible=false
      this.model = {}
    }
  }
}
</script>

<style scoped lang="less">
</style>
